<template>
  <div class="knowledge-management">
    <div class="page-header">
      <h2>知识库管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="showAddDialog">
          <el-icon><Plus /></el-icon>
          添加知识
        </el-button>
        <el-button @click="exportData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-filters">
      <el-form :model="searchForm" inline>
        <el-form-item label="知识标题">
          <el-input v-model="searchForm.title" placeholder="请输入知识标题" clearable />
        </el-form-item>
        <el-form-item label="知识分类">
          <el-select v-model="searchForm.category" placeholder="请选择知识分类" clearable>
            <el-option
              v-for="category in knowledgeCategories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchForm.status" placeholder="请选择审核状态" clearable>
            <el-option label="待审核" value="pending" />
            <el-option label="已发布" value="published" />
            <el-option label="已下架" value="offline" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.total }}</div>
          <div class="stat-label">总知识数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon published">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.published }}</div>
          <div class="stat-label">已发布</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon views">
          <el-icon><View /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalViews }}</div>
          <div class="stat-label">总阅读量</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon likes">
          <el-icon><Star /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalLikes }}</div>
          <div class="stat-label">总点赞数</div>
        </div>
      </div>
    </div>

    <!-- 知识列表 -->
    <div class="knowledge-list">
      <div class="list-header">
        <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        <div class="batch-actions" v-if="selectedItems.length > 0">
          <el-button type="success" size="small" @click="batchPublish">
            批量发布
          </el-button>
          <el-button type="warning" size="small" @click="batchOffline">
            批量下架
          </el-button>
          <el-button type="danger" size="small" @click="batchDelete">
            批量删除
          </el-button>
        </div>
      </div>

      <el-table
        :data="knowledgeList"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="知识标题" min-width="250">
          <template #default="{ row }">
            <div class="knowledge-title">
              <span>{{ row.title }}</span>
              <el-tag v-if="row.isTop" type="danger" size="small">置顶</el-tag>
              <el-tag v-if="row.isRecommended" type="success" size="small">推荐</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="知识分类" width="120">
          <template #default="{ row }">
            <el-tag :type="getCategoryColor(row.category)">
              {{ getCategoryLabel(row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="阅读量" width="100">
          <template #default="{ row }">
            <span class="views-count">{{ row.views }}</span>
          </template>
        </el-table-column>
        <el-table-column label="点赞数" width="100">
          <template #default="{ row }">
            <span class="likes-count">{{ row.likes }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewKnowledge(row)">
              查看
            </el-button>
            <el-button type="warning" size="small" @click="editKnowledge(row)">
              编辑
            </el-button>
            <el-dropdown @command="handleAction">
              <el-button type="info" size="small">
                更多<el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="row.status === 'pending'" :command="{action: 'publish', row}">
                    发布
                  </el-dropdown-item>
                  <el-dropdown-item v-if="row.status === 'published'" :command="{action: 'offline', row}">
                    下架
                  </el-dropdown-item>
                  <el-dropdown-item :command="{action: 'toggleTop', row}">
                    {{ row.isTop ? '取消置顶' : '设为置顶' }}
                  </el-dropdown-item>
                  <el-dropdown-item :command="{action: 'toggleRecommend', row}">
                    {{ row.isRecommended ? '取消推荐' : '设为推荐' }}
                  </el-dropdown-item>
                  <el-dropdown-item :command="{action: 'delete', row}" divided>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 添加/编辑知识对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑知识' : '添加知识'"
      width="900px"
      :before-close="handleCloseDialog"
    >
      <el-form
        ref="knowledgeFormRef"
        :model="knowledgeForm"
        :rules="knowledgeFormRules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="知识标题" prop="title">
              <el-input v-model="knowledgeForm.title" placeholder="请输入知识标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识分类" prop="category">
              <el-select v-model="knowledgeForm.category" placeholder="请选择知识分类">
                <el-option
                  v-for="category in knowledgeCategories"
                  :key="category.value"
                  :label="category.label"
                  :value="category.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识标签" prop="tags">
              <el-input v-model="knowledgeForm.tags" placeholder="请输入标签，用逗号分隔" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="知识摘要" prop="summary">
              <el-input
                v-model="knowledgeForm.summary"
                type="textarea"
                :rows="3"
                placeholder="请输入知识摘要"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="知识内容" prop="content">
              <el-input
                v-model="knowledgeForm.content"
                type="textarea"
                :rows="10"
                placeholder="请输入详细的知识内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否置顶">
              <el-switch v-model="knowledgeForm.isTop" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否推荐">
              <el-switch v-model="knowledgeForm.isRecommended" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitKnowledge" :loading="submitting">
            {{ isEdit ? '更新' : '添加' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 知识详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="知识详情"
      width="900px"
    >
      <div class="knowledge-detail" v-if="selectedKnowledge">
        <div class="detail-header">
          <h3>{{ selectedKnowledge.title }}</h3>
          <div class="detail-tags">
            <el-tag :type="getCategoryColor(selectedKnowledge.category)">
              {{ getCategoryLabel(selectedKnowledge.category) }}
            </el-tag>
            <el-tag v-if="selectedKnowledge.isTop" type="danger">置顶</el-tag>
            <el-tag v-if="selectedKnowledge.isRecommended" type="success">推荐</el-tag>
          </div>
        </div>

        <div class="detail-stats">
          <div class="stat-item">
            <span class="label">阅读量：</span>
            <span class="value">{{ selectedKnowledge.views }}</span>
          </div>
          <div class="stat-item">
            <span class="label">点赞数：</span>
            <span class="value">{{ selectedKnowledge.likes }}</span>
          </div>
          <div class="stat-item">
            <span class="label">收藏数：</span>
            <span class="value">{{ selectedKnowledge.favorites }}</span>
          </div>
        </div>

        <div class="detail-content">
          <div class="detail-section">
            <h4>知识摘要</h4>
            <p>{{ selectedKnowledge.summary }}</p>
          </div>

          <div class="detail-section">
            <h4>知识内容</h4>
            <div class="content-text">{{ selectedKnowledge.content }}</div>
          </div>

          <div class="detail-section">
            <h4>标签</h4>
            <div class="tags">
              <el-tag
                v-for="tag in selectedKnowledge.tags?.split(',')"
                :key="tag"
                type="info"
                size="small"
              >
                {{ tag.trim() }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Search, Document, Check, View, Star, ArrowDown } from '@element-plus/icons-vue'

// 数据状态
const loading = ref(false)
const submitting = ref(false)
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const isEdit = ref(false)
const selectAll = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 表单引用
const knowledgeFormRef = ref(null)

// 搜索表单
const searchForm = reactive({
  title: '',
  category: '',
  status: ''
})

// 统计数据
const statistics = reactive({
  total: 892,
  published: 756,
  pending: 89,
  offline: 47,
  totalViews: 156842,
  totalLikes: 23567
})

// 选中的知识
const selectedItems = ref([])
const selectedKnowledge = ref(null)

// 知识分类选项
const knowledgeCategories = [
  { value: 'fraud_prevention', label: '防诈骗知识' },
  { value: 'detection_technique', label: '检测技术' },
  { value: 'case_study', label: '案例分析' },
  { value: 'legal_knowledge', label: '法律知识' },
  { value: 'tech_trends', label: '技术趋势' },
  { value: 'safety_tips', label: '安全提示' }
]

// 知识表单
const knowledgeForm = reactive({
  title: '',
  category: '',
  tags: '',
  summary: '',
  content: '',
  isTop: false,
  isRecommended: false
})

// 表单验证规则
const knowledgeFormRules = {
  title: [
    { required: true, message: '请输入知识标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度为2-100个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择知识分类', trigger: 'change' }
  ],
  summary: [
    { required: true, message: '请输入知识摘要', trigger: 'blur' },
    { min: 10, max: 500, message: '摘要长度为10-500个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入知识内容', trigger: 'blur' },
    { min: 50, max: 10000, message: '内容长度为50-10000个字符', trigger: 'blur' }
  ]
}

// 模拟知识数据
const knowledgeList = ref([
  {
    id: 1,
    title: '如何识别电信诈骗的常见套路',
    category: 'fraud_prevention',
    tags: '电信诈骗,套路,识别技巧',
    summary: '介绍电信诈骗的常见手段和识别方法，帮助用户提高防范意识。',
    content: '电信诈骗是指通过电话、短信、网络等方式实施的诈骗行为...',
    views: 8524,
    likes: 1205,
    favorites: 356,
    status: 'published',
    isTop: true,
    isRecommended: true,
    createdAt: '2024-01-15T10:30:00'
  },
  {
    id: 2,
    title: 'AI检测技术在反诈骗中的应用',
    category: 'detection_technique',
    tags: 'AI检测,反诈骗,技术应用',
    summary: '探讨人工智能技术在诈骗检测中的应用原理和效果。',
    content: '随着人工智能技术的发展，AI在反诈骗领域发挥着越来越重要的作用...',
    views: 3428,
    likes: 567,
    favorites: 123,
    status: 'published',
    isTop: false,
    isRecommended: true,
    createdAt: '2024-01-14T14:20:00'
  }
])

// 计算属性
const filteredKnowledge = computed(() => {
  return knowledgeList.value.filter(item => {
    return (!searchForm.title || item.title.includes(searchForm.title)) &&
           (!searchForm.category || item.category === searchForm.category) &&
           (!searchForm.status || item.status === searchForm.status)
  })
})

// 方法
const loadKnowledge = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    total.value = filteredKnowledge.value.length
  } catch (error) {
    console.error('加载知识失败:', error)
    ElMessage.error('加载知识失败')
  } finally {
    loading.value = false
  }
}

const search = () => {
  currentPage.value = 1
  loadKnowledge()
}

const resetSearch = () => {
  Object.assign(searchForm, {
    title: '',
    category: '',
    status: ''
  })
  search()
}

const showAddDialog = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

const editKnowledge = (row) => {
  isEdit.value = true
  Object.assign(knowledgeForm, row)
  dialogVisible.value = true
}

const viewKnowledge = (row) => {
  selectedKnowledge.value = row
  detailDialogVisible.value = true
}

const resetForm = () => {
  Object.assign(knowledgeForm, {
    title: '',
    category: '',
    tags: '',
    summary: '',
    content: '',
    isTop: false,
    isRecommended: false
  })
}

const submitKnowledge = async () => {
  if (!knowledgeFormRef.value) return

  try {
    await knowledgeFormRef.value.validate()
    submitting.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    if (isEdit.value) {
      // 更新知识
      const index = knowledgeList.value.findIndex(item => item.id === knowledgeForm.id)
      if (index !== -1) {
        knowledgeList.value[index] = { ...knowledgeForm }
      }
      ElMessage.success('知识更新成功')
    } else {
      // 添加知识
      const newKnowledge = {
        ...knowledgeForm,
        id: Date.now(),
        status: 'pending',
        views: 0,
        likes: 0,
        favorites: 0,
        createdAt: new Date().toISOString()
      }
      knowledgeList.value.unshift(newKnowledge)
      ElMessage.success('知识添加成功')
    }

    dialogVisible.value = false
    loadKnowledge()
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}

const handleCloseDialog = () => {
  dialogVisible.value = false
  resetForm()
}

const handleAction = async ({ action, row }) => {
  switch (action) {
    case 'publish':
      await publishKnowledge(row)
      break
    case 'offline':
      await offlineKnowledge(row)
      break
    case 'toggleTop':
      await toggleTopKnowledge(row)
      break
    case 'toggleRecommend':
      await toggleRecommendKnowledge(row)
      break
    case 'delete':
      await deleteKnowledge(row)
      break
  }
}

const publishKnowledge = async (row) => {
  try {
    await ElMessageBox.confirm('确定要发布此知识吗？', '确认操作', {
      type: 'warning'
    })
    
    row.status = 'published'
    ElMessage.success('知识发布成功')
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const offlineKnowledge = async (row) => {
  try {
    await ElMessageBox.confirm('确定要下架此知识吗？', '确认操作', {
      type: 'warning'
    })
    
    row.status = 'offline'
    ElMessage.success('知识下架成功')
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const toggleTopKnowledge = async (row) => {
  row.isTop = !row.isTop
  ElMessage.success(row.isTop ? '设为置顶' : '取消置顶')
}

const toggleRecommendKnowledge = async (row) => {
  row.isRecommended = !row.isRecommended
  ElMessage.success(row.isRecommended ? '设为推荐' : '取消推荐')
}

const deleteKnowledge = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除此知识吗？此操作不可逆！', '确认删除', {
      type: 'warning'
    })
    
    const index = knowledgeList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      knowledgeList.value.splice(index, 1)
    }
    ElMessage.success('知识删除成功')
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const handleSelectAll = (val) => {
  if (val) {
    selectedItems.value = [...knowledgeList.value]
  } else {
    selectedItems.value = []
  }
}

const handleSelectionChange = (selection) => {
  selectedItems.value = selection
  selectAll.value = selection.length === knowledgeList.value.length
}

const batchPublish = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量发布选中的 ${selectedItems.value.length} 个知识吗？`, '确认操作', {
      type: 'warning'
    })
    
    selectedItems.value.forEach(item => {
      item.status = 'published'
    })
    ElMessage.success('批量发布成功')
    selectedItems.value = []
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const batchOffline = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量下架选中的 ${selectedItems.value.length} 个知识吗？`, '确认操作', {
      type: 'warning'
    })
    
    selectedItems.value.forEach(item => {
      item.status = 'offline'
    })
    ElMessage.success('批量下架成功')
    selectedItems.value = []
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const batchDelete = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量删除选中的 ${selectedItems.value.length} 个知识吗？此操作不可逆！`, '确认删除', {
      type: 'warning'
    })
    
    selectedItems.value.forEach(item => {
      const index = knowledgeList.value.findIndex(k => k.id === item.id)
      if (index !== -1) {
        knowledgeList.value.splice(index, 1)
      }
    })
    ElMessage.success('批量删除成功')
    selectedItems.value = []
    loadKnowledge()
  } catch (error) {
    // 用户取消操作
  }
}

const exportData = () => {
  ElMessage.success('数据导出功能开发中...')
}

const handlePageChange = (page) => {
  currentPage.value = page
  loadKnowledge()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadKnowledge()
}

// 辅助函数
const getCategoryLabel = (value) => {
  const category = knowledgeCategories.find(c => c.value === value)
  return category ? category.label : value
}

const getCategoryColor = (value) => {
  const colors = {
    fraud_prevention: 'danger',
    detection_technique: 'primary',
    case_study: 'warning',
    legal_knowledge: 'success',
    tech_trends: 'info',
    safety_tips: 'warning'
  }
  return colors[value] || ''
}

const getStatusLabel = (value) => {
  const labels = {
    pending: '待审核',
    published: '已发布',
    offline: '已下架'
  }
  return labels[value] || value
}

const getStatusColor = (value) => {
  const colors = {
    pending: 'warning',
    published: 'success',
    offline: 'danger'
  }
  return colors[value] || ''
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  loadKnowledge()
})
</script>

<style scoped>
.knowledge-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-filters {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 24px;
}

.stat-icon.published {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
}

.stat-icon.views {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}

.stat-icon.likes {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.knowledge-list {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.batch-actions {
  display: flex;
  gap: 10px;
}

.knowledge-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.views-count,
.likes-count {
  font-weight: bold;
  color: #409eff;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.knowledge-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.detail-header h3 {
  margin: 0;
  color: #333;
  flex: 1;
}

.detail-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-item .label {
  color: #666;
  font-weight: bold;
}

.stat-item .value {
  color: #333;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.detail-section p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.content-text {
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .knowledge-management {
    padding: 10px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
  }
  
  .search-filters .el-form {
    display: flex;
    flex-direction: column;
  }
  
  .search-filters .el-form-item {
    margin-bottom: 15px;
  }
  
  .detail-stats {
    flex-direction: column;
    gap: 15px;
  }
}
</style> 